<template>
	<view style="width: 100%;">
		<view class="cu-bar search bg-white">
			<view class="search-form round search-bar">
				<text style="font-size: 24upx;" class="iconfont icon-sousuo"></text>
				<input @confirm='onSearchConfirm' type="text" :placeholder="placeholder"  confirm-type="搜索" v-model="inputValue" :focus="focus" @blur="onBlur"></input>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		props:{
			placeholder:{
				type:String,
				default:'请输入搜索关键词'
			},
			focus:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				inputValue : ""
			};
		},
		computed:{
			
		},
		watch:{
			inputValue:function(){
				this.$emit("input",this.inputValue)
			}
		},
		methods:{
			onBlur(event){
				this.$emit("blur",event)
			},
			onFocus(event){
				this.$emit("focus",event)
			},
			onSearchInput(event) {
				// this.$emit("input", event)
			},
			onSearchConfirm(event) {
				this.$emit("confirm", event)
			},
			onPopupClick(event) {
				this.$emit("onPopupClick", event)
			}
		}
	}
</script>

<style lang="scss">
	.search{
		background: #fff;
		// position: fixed;
		// z-index: 9999;
		width: 100%;
		/* #ifdef H5 */
		// top: 10upx;
		/* #endif */
		/*#ifdef MP-WEIXIN*/
		// top:10upx;
		/*#endif*/
	}
	.search-bar{
		display: flex;
		flex-direction: row;
		justify-content: center;
		// padding: 0 0 0 80upx;
	}
	.search-form{
		height: 74upx !important;
		line-height: 74upx !important;
	}
</style>
